<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-date-picker v-model="dateMonth" type="month" placeholder="选择月" @change="handleSelectSatffPay">
        </el-date-picker>
      </el-col>
      <el-col :span="4" style="font-size: 22px;">
        {{ selectDictLabel(dict.type.cld_project_post, form.projectPostName) }}-{{ form.staffName }}
      </el-col>
    </el-row>
    <el-calendar :value="dateMonth">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{date, data}">
        {{ data.day.split('-').slice(1).join('-') }}
        <div v-if="staffForm[data.day]" class="slant-text-container">
          <div class="payTitle">实发薪酬</div>
          <div class="payValueClick" v-if="staffForm[data.day].detailsList"
            @click="handleViewPayDetails(staffForm[data.day])">
            {{ toMoney(staffForm[data.day].sumPay) }}
          </div>
          <div class="payValue" v-else>
            {{ toMoney(staffForm[data.day].sumPay) }}
          </div>
          <div v-if="staffForm[data.day].isConfirm == 0" class="slant-text"><el-tag type="danger">未确认</el-tag>
          </div>
        </div>

      </template>
    </el-calendar>
  </div>
</template>

<script>
import { getCalendarByStaffId } from "@/api/cld/CldPayDetails";
export default {
  name: "CldPayDetails",
  dicts: ['cld_project_post'],
  props: {
    dateMonth: {
      type: String
    },
    form: {
      type: Object
    }
  },
  data() {
    return {
      staffForm: {},
      // 当前选择行
      currRow: {},
      // 月份切换
      dateMonth: null
    };
  },
  created() {
    this.handleSelectSatffPay();
  },
  methods: {
    // 查询人员当月明细
    handleSelectSatffPay() {
      getCalendarByStaffId({
        projectId: this.projectId,
        year: this.parseTime(this.dateMonth, '{y}'),
        month: this.parseTime(this.dateMonth, '{m}'),
        staffId: this.form.staffId
      }).then(res => {
        this.staffForm = res.data;
      })
    },
  }
};
</script>
<style scoped>
::v-deep .el-calendar__header {
  display: none;
}

.payTitle {
  text-align: center;
  font-size: 13px;
}

.payValueClick {
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  color: #4d00ff;
}

.slant-text {
  position: absolute;
  right: 0;
  top: 0;

}
::v-deep .el-calendar-table .el-calendar-day{
  position: relative;
}
</style>
